import React from 'react';
import { Card, List, Tag, Button, Tooltip, Timeline, Collapse } from 'antd';
import { StarOutlined, ShareAltOutlined, EyeOutlined, ClockCircleOutlined } from '@ant-design/icons';

const articles = [
  {
    id: 1,
    title: 'AI市场规模预测：2025年将突破万亿',
    time: '2024-06-01',
    desc: '多家权威机构预测，AI市场规模将在未来三年持续高速增长...',
    detail: '根据IDC、Gartner等机构数据，AI相关产业链将迎来爆发式增长，涵盖芯片、算法、应用等多个环节。',
    collected: false
  },
  {
    id: 2,
    title: '全球AI监管政策趋势解读',
    time: '2024-05-28',
    desc: '欧美中等主要经济体纷纷出台AI监管政策，强调安全与创新并重...',
    detail: '美国、欧盟、中国等地的AI监管政策各有侧重，未来将影响全球AI产业格局。',
    collected: true
  },
  {
    id: 3,
    title: 'AI人才需求持续走高，企业争抢高端人才',
    time: '2024-05-20',
    desc: 'AI领域高端人才缺口持续扩大，薪资水平不断提升...',
    detail: '顶尖AI人才成为各大科技公司争抢对象，相关岗位薪资涨幅明显。',
    collected: false
  }
];

const { Panel } = Collapse;

const InsightList: React.FC = () => {
  return (
    <Card title={<span style={{ color: '#222', fontWeight: 600, fontSize: 18 }}>文章列表</span>} bordered={false} style={{ background: '#fff', borderRadius: 16, color: '#222' }}>
      <Timeline style={{ margin: '16px 0' }}>
        {articles.map(item => (
          <Timeline.Item key={item.id} color="#fa8c16" dot={<ClockCircleOutlined style={{ fontSize: 16, color: '#fa8c16' }} />}>
            <Card
              style={{ background: '#f6faff', borderRadius: 12, color: '#222', marginBottom: 8 }}
              title={<span style={{ color: '#222', fontWeight: 600 }}>{item.title}</span>}
              extra={<span style={{ color: '#fa8c16' }}>{item.time}</span>}
              actions={[
                <Tooltip title={item.collected ? '已收藏' : '收藏'}>
                  <Button type={item.collected ? 'primary' : 'default'} shape="circle" icon={<StarOutlined />} />
                </Tooltip>,
                <Tooltip title="分享">
                  <Button shape="circle" icon={<ShareAltOutlined />} />
                </Tooltip>,
                <Tooltip title="展开阅读">
                  <Button shape="circle" icon={<EyeOutlined />} />
                </Tooltip>
              ]}
            >
              <div style={{ color: '#666', marginBottom: 8 }}>{item.desc}</div>
              <Collapse ghost>
                <Panel header="点击展开阅读全文" key="1">
                  <div style={{ color: '#888' }}>{item.detail}</div>
                </Panel>
              </Collapse>
            </Card>
          </Timeline.Item>
        ))}
      </Timeline>
    </Card>
  );
};

export default InsightList; 